<!-- components/reconciliation/MatchingPanel.vue -->
<template>
  <el-card class="panel-card" header="智能匹配建议">
    <template #header>
      <div class="panel-header">
        <span>智能匹配建议</span>
        <div class="header-actions">
          <el-badge :value="highConfidenceCount" :max="99" type="success" v-if="highConfidenceCount > 0">
            <el-button type="success" size="small" @click="onSmartMatch">
              智能匹配
            </el-button>
          </el-badge>
          <el-button v-else type="primary" size="small" @click="onSmartMatch">
            智能匹配
          </el-button>
        </div>
      </div>
    </template>
    
    <!-- 骨架屏 -->
    <div v-if="loading" class="skeleton-container">
      <el-skeleton v-for="i in 3" :key="i" :rows="4" animated />
    </div>
    
    <!-- 空状态 -->
    <div v-else-if="matches.length === 0" class="empty-state">
      <div class="empty-illustration">
        <svg width="120" height="120" viewBox="0 0 120 120">
          <circle cx="60" cy="60" r="50" fill="#f0f7ff" />
          <path d="M40 50 L55 65 L80 40" stroke="#409eff" stroke-width="4" fill="none" />
        </svg>
      </div>
      <p>暂无匹配建议</p>
      <p class="hint">请选择左侧流水和右侧订单进行手动匹配</p>
    </div>
    
    <!-- 匹配结果列表 -->
    <div v-else class="matches-container">
      <!-- 高置信度匹配 -->
      <div v-if="highConfidenceMatches.length > 0" class="match-group">
        <div class="group-header">
          <el-tag type="success" effect="dark">高置信度匹配 ({{ highConfidenceMatches.length }})</el-tag>
        </div>
        <div 
          v-for="match in highConfidenceMatches" 
          :key="match.id"
          class="match-item high-confidence"
          @click="showMatchDetail(match)"
        >
          <div class="match-content">
            <div class="amount-section">
              <span class="amount">{{ formatCurrency(match.salesOrder.orderAmount) }}</span>
              <el-tag type="success" size="small" class="confidence-tag">
                {{ match.matchConfidence }}%
              </el-tag>
            </div>
            <div class="info-section">
              <div class="payer-info">
                <el-icon><User /></el-icon>
                <span>{{ match.bankTransaction.payerName }}</span>
              </div>
              <div class="customer-info">
                <el-icon><OfficeBuilding /></el-icon>
                <span>{{ match.orderInfo?.customerName || match.salesOrder?.customerName || '' }}</span>
              </div>
            </div>
          </div>
          <div class="match-actions">
            <el-button type="success" size="small" @click.stop="onConfirmMatch(match.id)">
              确认
            </el-button>
            <el-button type="info" size="small" @click.stop="onRejectMatch(match.id)">
              拒绝
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 待审核匹配 -->
      <div v-if="reviewMatches.length > 0" class="match-group">
        <div class="group-header">
          <el-tag type="warning" effect="dark">待审核匹配 ({{ reviewMatches.length }})</el-tag>
        </div>
        <div 
          v-for="match in reviewMatches" 
          :key="match.id"
          class="match-item review"
          @click="showMatchDetail(match)"
        >
          <div class="match-content">
            <div class="amount-section">
              <span class="amount">{{ formatCurrency(match.salesOrder.orderAmount) }}</span>
              <el-tag type="warning" size="small" class="confidence-tag">
                {{ match.matchConfidence }}%
              </el-tag>
            </div>
            <div class="info-section">
              <div class="payer-info">
                <el-icon><User /></el-icon>
                <span>{{ match.bankTransaction.payerName }}</span>
              </div>
              <div class="customer-info">
                <el-icon><OfficeBuilding /></el-icon>
                <span>{{ match.orderInfo?.customerName || match.salesOrder?.customerName || '' }}</span>
              </div>
            </div>
          </div>
          <div class="match-actions">
            <el-button type="success" size="small" @click.stop="onConfirmMatch(match.id)">
              确认
            </el-button>
            <el-button type="info" size="small" @click.stop="onRejectMatch(match.id)">
              拒绝
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 需核对匹配 -->
      <div v-if="lowConfidenceMatches.length > 0" class="match-group">
        <div class="group-header">
          <el-tag type="danger" effect="dark">需核对匹配 ({{ lowConfidenceMatches.length }})</el-tag>
        </div>
        <div 
          v-for="match in lowConfidenceMatches" 
          :key="match.id"
          class="match-item low-confidence"
          @click="showMatchDetail(match)"
        >
          <div class="match-content">
            <div class="amount-section">
              <span class="amount">{{ formatCurrency(match.salesOrder.orderAmount) }}</span>
              <el-tag type="danger" size="small" class="confidence-tag">
                {{ match.matchConfidence }}%
              </el-tag>
            </div>
            <div class="info-section">
              <div class="payer-info">
                <el-icon><User /></el-icon>
                <span>{{ match.bankTransaction.payerName }}</span>
              </div>
              <div class="customer-info">
                <el-icon><OfficeBuilding /></el-icon>
                <span>{{ match.orderInfo?.customerName || match.salesOrder?.customerName || '' }}</span>
              </div>
            </div>
          </div>
          <div class="match-actions">
            <el-button type="success" size="small" @click.stop="onConfirmMatch(match.id)">
              确认
            </el-button>
            <el-button type="info" size="small" @click.stop="onRejectMatch(match.id)">
              拒绝
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 匹配详情抽屉 -->
    <el-drawer
      v-model="showDetailDrawer"
      title="匹配详情"
      size="40%"
      direction="rtl"
    >
      <div v-if="selectedMatch" class="match-detail">
        <el-descriptions title="匹配信息" :column="1" border>
          <el-descriptions-item label="置信度">
            <el-tag :type="getConfidenceType(selectedMatch.matchConfidence)">
              {{ selectedMatch.matchConfidence }}%
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="匹配类型">
            <el-tag>{{ selectedMatch.matchType === 'auto' ? '自动匹配' : '手动匹配' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="匹配算法">
            <el-tag>{{ selectedMatch.algorithmUsed || '综合算法' }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        
        <el-divider />
        
        <el-descriptions title="银行流水" :column="1" border>
          <el-descriptions-item label="流水ID">
            {{ selectedMatch.bankTransaction.transactionId }}
          </el-descriptions-item>
          <el-descriptions-item label="付款方">
            {{ selectedMatch.bankTransaction.payerName }}
          </el-descriptions-item>
          <el-descriptions-item label="金额">
            {{ formatCurrency(selectedMatch.bankTransaction.amount) }}
          </el-descriptions-item>
          <el-descriptions-item label="日期">
            {{ selectedMatch.bankTransaction.transactionDate }}
          </el-descriptions-item>
        </el-descriptions>
        
        <el-divider />
        
        <el-descriptions title="销售订单" :column="1" border>
          <el-descriptions-item label="订单ID">
            {{ selectedMatch.salesOrder.platformOrderId }}
          </el-descriptions-item>
          <el-descriptions-item label="客户">
            {{ selectedMatch.orderInfo?.customerName || selectedMatch.salesOrder?.customerName || '' }}
          </el-descriptions-item>
          <el-descriptions-item label="金额">
            {{ formatCurrency(selectedMatch.salesOrder.orderAmount) }}
          </el-descriptions-item>
          <el-descriptions-item label="日期">
            {{ selectedMatch.salesOrder.orderDate }}
          </el-descriptions-item>
        </el-descriptions>
        
        <el-divider />
        
        <div class="reasoning-section" v-if="selectedMatch.reasoning && selectedMatch.reasoning.length > 0">
          <h4>置信度计算依据</h4>
          <el-table :data="selectedMatch.reasoning" style="width: 100%">
            <el-table-column prop="factor" label="因素" />
            <el-table-column prop="score" label="得分" width="80" />
            <el-table-column prop="weight" label="权重" width="80">
              <template #default="{ row }">
                {{ (row.weight * 100).toFixed(0) }}%
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
// 定义匹配结果类型
interface MatchResult {
  id: string;
  salesOrder: {
    id: number;
    platformOrderId: string;
    customerName: string;
    orderAmount: number;
    orderDate: string;
    invoiceStatus: string;
  };
  bankTransaction: {
    id: number;
    transactionId: string;
    payerName: string;
    amount: number;
    transactionDate: string;
  };
  matchType: 'auto' | 'manual';
  matchConfidence: number;
  matchStatus: 'confirmed' | 'pending' | 'rejected';
  algorithmUsed?: string;
  matchedAt?: string;
  confirmedAt?: string;
  orderInfo?: {
    customerName: string;
  };
  reasoning?: Array<{
    factor: string;
    score: number;
    weight: number;
    description: string;
  }>;
}

// 定义Props和Emits
interface Props {
  matches: MatchResult[];
  selectedTransactions: any[];
  selectedOrders: any[];
}

interface Emits {
  (e: 'confirm-match', matchId: string): void;
  (e: 'reject-match', matchId: string): void;
  (e: 'smart-match'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 响应式数据
const showDetailDrawer = ref(false);
const selectedMatch = ref<MatchResult | null>(null);
const loading = ref(false);

// 计算属性
const highConfidenceMatches = computed(() => {
  return props.matches.filter(match => match.matchConfidence >= 80);
});

const reviewMatches = computed(() => {
  return props.matches.filter(match => match.matchConfidence >= 50 && match.matchConfidence < 80);
});

const lowConfidenceMatches = computed(() => {
  return props.matches.filter(match => match.matchConfidence < 50);
});

const highConfidenceCount = computed(() => {
  return highConfidenceMatches.value.length;
});

// 方法
const onConfirmMatch = (matchId: string) => {
  emit('confirm-match', matchId);
};

const onRejectMatch = (matchId: string) => {
  emit('reject-match', matchId);
};

const onSmartMatch = () => {
  emit('smart-match');
};

const showMatchDetail = (match: MatchResult) => {
  selectedMatch.value = match;
  showDetailDrawer.value = true;
};

const formatCurrency = (amount: number) => {
  return amount.toFixed(2);
};

const getConfidenceType = (confidence: number) => {
  if (confidence >= 80) return 'success';
  if (confidence >= 50) return 'warning';
  return 'danger';
};

// 模拟加载状态
const simulateLoading = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);
};
</script>

<style scoped>
.panel-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.matches-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.match-group {
  margin-bottom: 20px;
}

.group-header {
  margin-bottom: 12px;
}

.match-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.match-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.match-item.high-confidence {
  background: linear-gradient(135deg, #f6ffed 0%, #f0f7ff 100%);
  border: 1px solid #b7eb8f;
}

.match-item.review {
  background: linear-gradient(135deg, #fffbe6 0%, #fff8e6 100%);
  border: 1px solid #ffe58f;
}

.match-item.low-confidence {
  background: linear-gradient(135deg, #fff2f0 0%, #fff8f8 100%);
  border: 1px solid #ffccc7;
}

.match-content {
  flex: 1;
}

.amount-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.amount {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.confidence-tag {
  font-weight: bold;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.payer-info, .customer-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
}

.match-actions {
  display: flex;
  gap: 8px;
}

.match-detail {
  padding: 20px;
}

.reasoning-section {
  margin-top: 20px;
}

.hint {
  color: #999;
  font-size: 14px;
}

/* 骨架屏样式 */
.skeleton-container {
  padding: 20px;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.empty-illustration {
  margin-bottom: 20px;
  animation: float-animation 3s infinite ease-in-out;
}

@keyframes float-animation {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
</style>